<template>
    <div class="server">
        <div class="title">
            <span>服务</span>
            <span>所需积分</span>
            <span>操作</span>
        </div>
        <div class="list-item" v-for="(l,item) in list" :key="item">
            <span>{{l.desc}}</span>
            <span>{{l.price}}</span>
            <span @click="exchangeServer(l.id)">兑换</span>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Server",
        data(){
            return {
                type:2,
                list:[]
            }
        },
        mounted() {
            this.$api.my.getgearlist(this.getCookie('token'),this.type).then(res=> {
                // 执行某些操作
                this.list = res.data.data
            })
        },
        methods:{
            exchangeServer(id){

                this.$dialog.confirm({
                    title: '兑换提示',
                    message: '确定兑换此服务吗?'
                }).then(() => {
                    this.$api.my.IntegralExchangeVip(this.getCookie('token'),id).then(res=> {
                        // 执行某些操作

                        this.$toast({
                            message: res.data.msg,
                            duration: 1000,
                            forbidClick: true
                        })

                    })
                }).catch(() => {
                    // on cancel
                });

            }
        }

    }
</script>

<style scoped>
    .title{
        padding: 0 5%;
        width: 100%;
        height: 3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
    }
    .title span{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        text-align: center;
        display: inline-flex;
        min-width: 3rem;
        justify-content: center;
    }
    .title span:last-child{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width:3.06rem;
        height:1.5rem;
    }
    .list-item{
        width: 90%;
        margin: 0 auto;
        height: 4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
    }
    .list-item span{
        text-align: center;
        display: inline-flex;
        min-width: 3rem;
        justify-content: center;
    }
    .list-item span:nth-child(1){
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .list-item span:nth-child(2){
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,56,56,1);
    }
    .list-item span:nth-child(3){
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width:3.06rem;
        height:1.5rem;
        background:rgba(20,163,101,1);
        border-radius:0.2rem;
    }
</style>